'use strict'
import React, { Component, PropTypes } from 'react'

class SubHeader extends Component {

    constructor(  ){
        super()
        this.state = {
            currentIndex : 0
        }
    }

    checkIndex( index ){
        return index === this.state.currentIndex ? "swipe-tab slick-slide slick-active slick-current active-tab" : "swipe-tab slick-slide slick-active"
    }


    componentDidMount() {
        this.state = {
            currentIndex : 0
        }
    }


    render() {

        return (
            <div className="sub-header">
                <div className="swipe-tabs slick-slider slick-initialized">
                    <div aria-live="polite" className="slick-list">
                        <div className="slick-track" styleName="width: 30000px;">

                            {
                                React.Children.map( this.props.children , ( element,index ) => {
                                    return(
                                        <div onClick={ () => { this.setState({ currentIndex : index }) } } className={ this.checkIndex( index ) }>{ element.props.name }</div>
                                    )
                                })
                            }

                        </div>
                    </div>
                </div>
            </div>
        )

    }
}

export default SubHeader;